<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Charts-pie</view>
			<view class="tui-page__desc">饼状图表</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title" style="padding-top: 0;">某站点用户访问来源</view>
			<view class="tui-charts-box">
				<tui-charts-pie title="访问来源" ref="tui_pie_1" @click="onClick"></tui-charts-pie>
			</view>
			<view class="tui-charts-box tui-mtop">
				<tui-charts-pie :legend="legend" title="访问来源" ref="tui_pie_2" @click="onClick"></tui-charts-pie>
			</view>
			<view class="tui-charts-box tui-mtop">
				<tui-charts-pie :type="2" :legend="legend" title="访问来源" ref="tui_pie_3" @click="onClick">
				</tui-charts-pie>
			</view>
			<view class="tui-title">性别分布</view>
			<view class="tui-legend__box">
				<view class="tui-legend__item" v-for="(item,index) in dataset2" :key="index">
					<view class="tui-legend__circle" :style="{backgroundColor:item.color}"></view>
					<text>{{item.name}}（{{item.rate}}）</text>
				</view>
			</view>
			<view class="tui-charts-box">
				<tui-charts-pie :legend="{show:false}" title="性别分布" ref="tui_pie_4" ></tui-charts-pie>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataset: [{
						value: 1048,
						color: '#03ABBE',
						name: '搜索引擎'
					},
					{
						value: 735,
						color: '#C0CB33',
						name: '直接访问'
					},
					{
						value: 580,
						color: '#FFD54F',
						name: '邮件营销'
					},
					{
						value: 484,
						color: '#FF7145',
						name: '联盟广告'
					}
				],
				legend: {
					show: true,
					direction: 'vertical'
				},
				dataset2: [{
					value: 1200,
					color: '#6E7EB3',
					name: '男',
					rate:'60%'
				}, {
					value: 800,
					color: '#FE7488',
					name: '女',
					rate:'40%'
				}]
			}
		},
		onReady() {
			this.$refs.tui_pie_1.draw(this.dataset)
			this.$refs.tui_pie_2.draw(this.dataset)
			this.$refs.tui_pie_3.draw(this.dataset)
			this.$refs.tui_pie_4.draw(this.dataset2)
		},
		methods: {
			onClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 60rpx 0 50rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.tui-charts-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.tui-mtop {
		margin-top: 120rpx;
	}
	.tui-legend__box {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.tui-legend__item {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	
	.tui-legend__circle {
		height: 20rpx;
		width: 20rpx;
		border-radius: 50%;
		margin-right: 8rpx;
		flex-shrink: 0;
	}
</style>
